<template>
    <div id="chinaMap" ref="chinaMap" style="width:800px;height:600px;">
        china地图
    </div>
</template>
<script>
// 01 生命周期mounted 创建
// 02 china.json 导入（ajax请求回来）
// 03 options 应该在data中确定
// 04 请求回来china.json的数据 更新option 同时setOption
// 05 单击加载省份地图  事件在实例化后注册
// 06 用type判断当前类型 1 中国  2 省  3 市地图
import * as echarts from 'echarts'
import pinyin from '@/assets/pinyin'
import chinajson from '@/assets/china.json'
import area from '@/assets/area'
console.log(pinyin,"pinyin");
   export default {
      data(){
        return {
            chinaMap:null, //地图的实例
            type:1,//1 中国  2 省  3 市地图
            option:{//地图选项
                title:{text:"中国地图"}, //中国地图
                tooltip:{},//提示
                legend:{},//图例
                series:[ //系列数据
                    {name:"china",type:"map",mapType:"china",data:[]}
                ]

            },
        }
      },
      mounted(){ //页面挂载完毕
            // 实例化
            this.chinaMap = echarts.init(this.$refs.chinaMap);
            // 注册中国地图
            echarts.registerMap("china",chinajson);
            // 不要提示
            this.option.tooltip.show = false;
            // 更新pinyin省份拼音（为什么要拼音，请求省份json数据需要 需要pinyin确定文件名）
            this.option.series[0].data = pinyin.map(item=>({"name":item.provinceName,value:item.provincePhonetic.toLowerCase()}))
            // 更新渲染（重新渲染地图）
            this.chinaMap.setOption(this.option);
            // 注册单击事件
            this.chinaMap.on("click",this.getProvince)
            // this.getChina();
            
      },
      methods:{
        // 获取省份/市区的json
        getProvince(e){
            if(this.type==1){ //如果类型为1获取省份
                this.chinaMap.showLoading({ text: "",color: "#8870eb" });
                // 动态的拼接省份的请求地址
                fetch("https://orangleli.github.io/imagesResources/echartMapResources/geoProvince/"+e.data.value+".json")
                .then(res=>res.json()) //转换为json
                .then(res=>{
                    // console.log("res",res);
                    this.chinaMap.hideLoading(); //隐藏加载地图
                    this.type = 2; //设置类型为2
                    echarts.registerMap(e.data.value,res); //注册地图
                    this.option.series[0].name=e.data.value; //设置名称（也可以用中文）
                    this.option.series[0].mapType=e.data.value; //设置地图的类型（也可以用中文）
                    this.chinaMap.setOption(this.option) //更新选项（重新渲染地图）

                })
                .catch(()=>{
                    // 失败了要隐藏加载提示
                    this.chinaMap.hideLoading();
                })
            }else if(this.type===2){
                // 如果是2 获取市区的json数据
                // 显示加载提示
                this.chinaMap.showLoading({ text: "",color: "#8870eb" });
                console.log(e,"type2");
                // 动态的拼接市区的请求地址
                fetch("https://orangleli.github.io/imagesResources/echartMapResources/city/henan/"+area[e.name]+".json")
                .then(res=>res.json()) //转换为json
                .then(res=>{
                    this.chinaMap.hideLoading(); //隐藏加载提示
                    echarts.registerMap(e.name,res);//重新注册地图
                    this.option.series[0].name=e.name; //更新地图的名称和mapType
                    this.option.series[0].mapType=e.name;
                    this.chinaMap.setOption(this.option) //重新根据选项来渲染地图
                    this.type = 3 //类型类型为3
                })
                .catch(()=>{
                    // 失败隐藏地图
                    this.chinaMap.hideLoading();
                })
            }else{
                // 如果type不是1不是2
                echarts.registerMap("china",chinajson); //重新注册中国地图
                this.option.tooltip.show = false; //不要提示
                this.option.series[0].mapType="china"; //名称
                // 更新data数据
                this.option.series[0].data = pinyin.map(item=>({"name":item.provinceName,value:item.provincePhonetic.toLowerCase()}))
                this.chinaMap.setOption(this.option); //重新渲染
                this.type =1; //设置类型为1
                // this.chinaMap.on("click",this.getProvince)
            }
            
        },
        getChina(){
            fetch("./china.json")
            .then(res=>res.json())
            .then(res=>{
                echarts.registerMap("china",res);
                this.option.tooltip.show = false;
                this.chinaMap.setOption(this.option);
                
            })
        }
      }

   }
</script>